﻿<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
    <title>iFlashAlbum</title>
    <link rel="stylesheet" type="text/css" href="vendors/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="vendors/scrollbar/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" type="text/css" href="vendors/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="style/editor.css">
    <script src="vendors/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="common.js" type="text/javascript"></script>
</head>

<body>
    <div class="ifa_page_group">
        <div class="page">
            <header class="ifa_header">
                <a><i class="iconindex_logo"></i></a>
                <div class="ifa_nav">
                    <ul class="layui-nav ifa_nav_ul" lay-filter="">
                        <li class="layui-nav-item ifa_nav_item"><a href="">Product</a></li>
                        <li class="layui-nav-item ifa_nav_item"><a href="">Cart</a></li>
                        <li class="layui-nav-item ifa_nav_item"><a href="">Order Status</a></li>
                    </ul>
                </div>
            </header>
            <div id="ifa_zsj_controlContent" class="ifa_zsj_controlContent"></div>
            <div class="content ifa_content clearfix">
                <div class="ifa_left_content">
                    <div class="ifa_left_header">
                        <div class="ifa_header_div">
                            <div class=" ifa_header_input">
                                <input type="checkbox" name="" title="">
                                <div class="ifa_checkbox_input"></div>
                                Hide used photos
                            </div>

                        </div>
                    </div>
                    <div class="ifa_left_list">
                        <div class="ifa_list_tree" id="LAY_srcoll">
                            <ul class="flow-default" id="LAY_left">

                            </ul>
                        </div>
                        <div class="ifa_left_bottom">
                            <p><span id="ifa_zsj_photoNum">0</span> Photos Loaded</p>
                        </div>
                    </div>
                    <div class="ifa_left_footer">
                        <a>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tianjiazhaopian"></use>
                            </svg>
                            LOAD PHOTO
                        </a>
                        <input type="file" id="ifa_zsj_fileInput" multiple="multiple" style="display: none">
                    </div>
                </div>
                <div class="ifa_photo_content">
                    <article class="ifa_photo_canvas">
                        <div class="ifa_photo_svg">
                            <span id="ifa_zsj_albumTitle">Memory Of Time</span>
                            <a class="clearfix">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-bianji"></use>
                                </svg>
                            </a>
                        </div>
                        <div class="ifa_photo_position">
                            <canvas id="ifa_zsj_board" width="2000" height="1000"></canvas>
                            <a class="ifa_arrow ifa_arrow_left">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-arrowbigleft"></use>
                                </svg>
                            </a>
                            <a class="ifa_arrow ifa_arrow_right">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-arrowbigright"></use>
                                </svg>
                            </a>
                            <p class="ifa_photo_num"><span id="ifa_zsj_curMod">1</span>/<span id="ifa_zsj_totalMod">40</span></p>
                            <div class="ifa_photo_btn">
                                <a class="ifa_photo_beautify">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-xingzhuang1kaobei"></use>
                                    </svg>
                                    SHUFFLE
                                </a>
                                <a class="ifa_photo_shopping">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gouwuche"></use>
                                    </svg>
                                    ORDER</a>
                            </div>
                        </div>
                    </article>
                    <div class="ifa_photo_bottom ">
                        <ul class="flow-default ifa_photo_list " id="LAY_bottom">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="page " id="ifa_load_page" style="display: none;">
<div class="ifa_load_bg">
    <div class="sk-circle">
        <div class="sk-circle1 sk-child"></div>
        <div class="sk-circle2 sk-child"></div>
        <div class="sk-circle3 sk-child"></div>
        <div class="sk-circle4 sk-child"></div>
        <div class="sk-circle5 sk-child"></div>
        <div class="sk-circle6 sk-child"></div>
        <div class="sk-circle7 sk-child"></div>
        <div class="sk-circle8 sk-child"></div>
        <!--  <div class="sk-circle9 sk-child"></div>
                                <div class="sk-circle10 sk-child"></div>
                                <div class="sk-circle11 sk-child"></div>
                                <div class="sk-circle12 sk-child"></div>-->
        <!--</div>-->
    </div>
    <p class="ifa_load_info">Please later,are being designed...</p>
</div>
</div>
<div class="page" id="ifa_complete_page" style="display: none;">
<div class="ifa_load_bg">
    <div class="ifa_success_pass">
        <img src="assets/icon/success.png" />
        <!--<div class="ifa_success_div"></div>-->
    </div>
    <p class="ifa_load_info">Design complete</p>
</div>
</div>
<script id="tpl_left_item" type="text/html">
        <li class="ifa_list_item" data-num="{{d.num}}" data-imgId="{{d.id}}">
            <a>
                <svg class="icon" aria- hidden="true">
                    <use xlink:href="#icon-lajitong"></use>
                </svg>
            </a>
            <img src="{{d.url}}"/>
            <div class="{{d.cls}}"></div>
            <span>{{d.num}}</span>
        </li>
    </script>
<script src="//at.alicdn.com/t/font_glu3t3h6862vgqfr.js" type="text/javascript"></script>
<script src="vendors/encrypt/jsencrypt.js" type="text/javascript"></script>
<script src="vendors/layui/lay/dest/layui.all.js" type="text/javascript"></script>
<script src="vendors/fabric/fabric.min.js" type="text/javascript"></script>
<script src="vendors/scrollbar/jquery.mCustomScrollbar.min.js" type="text/javascript"></script>
<script src="vendors/webuploader/webuploader.html5only.js"></script>
<!--build路径-->
<!--/*<script src="js/main.js"></script>*/-->

<!--scr路径-->
<script src="js/ifa_uploader.js"></script>
<!--<script src="js/ifa_editor.js"></script>-->
<script src="js/ifa_zeditor.js"></script>
<script src="js/ifa_zindex.js"></script>
<script type="text/javascript">
        //移除导航hover
        $(".ifa_nav_ul").find('span').remove();

        // 默认设置为false 不隐藏状态
        var hideStatus = false;
        /*模拟checkbox*/
        $(document).on("click", '.ifa_checkbox_input', function () {
            var mobile = $(this);
            var mobileInput = $(".ifa_header_input input");
            mobile.addClass("ifa_checkbox_inputed").removeClass("ifa_checkbox_inpute");
            mobileInput.prop("checked", true);
            hideStatus = true;
            $('.ifa_left_content .ifa_list_tree').find('.ifa_list_item[data-num!=0]').hide();
        })
        $(document).on("click", '.ifa_checkbox_inputed', function () {
            var mobile = $(this);
            var mobileInput = $(".ifa_header_input input");
            mobile.addClass("ifa_checkbox_inpute").removeClass("ifa_checkbox_inputed");
            mobileInput.prop("checked", false);
            hideStatus = false;
            $('.ifa_left_content .ifa_list_tree').find('.ifa_list_item[data-num!=0]').show();
        })
        /*高度适应 css中已定义最小高度*/
        var bodyHeighr = $(window).height();
        var headerHeighr = $(".ifa_header").height();
        var inputHeighr = $(".ifa_header_input").height();
        var footerHeighr = $(".ifa_left_footer").height();
        var leftHeight = bodyHeighr - (headerHeighr + inputHeighr + footerHeighr);
        var autoHeight = bodyHeighr - headerHeighr;
        var autowidth = $(".ifa_photo_content").width();
        var autoheight = $(".ifa_photo_content").height();
        $(".ifa_left_list").height(leftHeight);
        $(".ifa_photo_position").css({ marginTop: bodyHeighr / 15 });
        $(".ifa_photo_position").css({ width: autowidth * 0.90 });
        var positionWidth = autowidth * 0.9;
        window.positionHeight = autoheight;


        //定义相册的原标题
        var albumTitle = 'Memory Of Time';
        window.albumTitle=albumTitle;


        /*layuiiframetitle*/
        $(".ifa_photo_svg").on('click', 'a', function () {
            layer.open({
                type: 2,
                title: ['Edit Title', 'height:48px;background：#e2e2e2;font-size:16px;color:#333;border:none;line-height:48px;'],
                shadeClose: false,
                shade: 0.8,
                scrollbar: false,
                area: ['750px', '245px'],
                content: ['iframetitle.html', 'no'],//iframe的url
            });
        });

        // $(function () {


        // });

    </script>
</body>

</html>